<template>
  <div class="song-list">
    <ul>
      <li v-for="(song,index) in songs" :key="song.mid" class="item" @click="selectItem(song,index)">
        <div class="rank" v-show="rank">
          <div :class="getCls(index)">{{getText(index)}}</div>
        </div>
        <div class="content">
          <h2 class="name">{{song.name}}</h2>
          <p class="desc">{{getDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'song-list',
  props: {
    songs: {
      type: Array,
      default: () => []
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getDesc (song) {
      return `${song.singer}·${song.album}`
    },
    selectItem (item, index) {
      this.$emit('select', item, index)
    },
    getText (index) {
      return parseInt(index) > 2 ? index : ''
    },
    getCls (index) {
      return parseInt(index) > 2 ? 'text' : `top${index}`
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~common/css/variable';
  @import '~common/css/mixin';
  .song-list{
    .item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: 64px;
      font-size: @font-size-medium;
      .rank {
        flex: 0 0 25px;
        width: 25px;
        height: 25px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        text-align: center;
        div {
          width: 100%;
          height: 100%;
          background-size: 25px 24px;
        }
        .top0 {
          .bg-image('first');
        }
        .top1 {
          .bg-image('second');
        }
        .top2 {
          .bg-image('third');
        }
        .text {
          color: @color-theme;
          font-size: @font-size-large;
        }
      }
      .content {
        flex: 1;
        line-height: 20px;
        overflow: hidden;
        .name {
          .no-wrap;
        }
        .desc {
          .no-wrap;
          margin-top: 4px;
          color: @color-text-d;
        }
      }
    }
  }
</style>
